<template>
  <basic-dialog :visible="show"
                title="子设备配置"
                :isShowClose="true"
                :is-show-basic-footer="false"
                min-width="800px"
                @close="show = false"
  >
    <q-form class="q-gutter-md dialog-content" @submit="submitData">
      <div class="content-wrapper scrollbar">
        <div class="detail-container flex">
          <div class="margin-r-20">驱动: {{ currentDriverInfo.driverName || '-' }}</div>
        </div>
        <q-separator class="margin-t-20 margin-b-20" />
        <div class="title">采集方式</div>
        <div class="row">
          <div class="col">
            <yz-input v-model="form.type"
                      inputType="select"
                      :rules="[0]"
                      :options="collectTypeListData"
                      style="width: 320px"
                      :is-disable="isPrePlc"
                      title="采集方式"
            />
          </div>
        </div>
        <div v-if="netPort">
          <div class="title">网口信息</div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.collectIp"
                        style="width: 320px"
                        :rules="[0]"
                        :hint-rule="[val => val !== '' || '请输入IP地址']"
                        title="IP地址"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.collectPort"
                        style="width: 320px"
                        :hint-rule="[val => val !== '' || '请输入设备端口']"
                        :rules="[0]"
                        title="设备端口"
              />
            </div>
          </div>
        </div>

        <div v-if="seriesPort">
          <div class="title">串口信息</div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.serialPort"
                        :rules="[0]"
                        inputType="select"
                        :options="serialPortList"
                        style="width: 320px"
                        title="串口号"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.baudRate"
                        style="width: 320px"
                        :rules="[0]"
                        title="波特率"
              />
            </div>
          </div>

          <div class="row">
            <div class="col">
              <yz-input v-model="form.dataBit"
                        :rules="[0]"
                        style="width: 320px"
                        title="数据位长度"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.stopBit"
                        :rules="[0]"
                        style="width: 320px"
                        title="停止位长度"
              />
            </div>
          </div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.parity"
                        :rules="[0]"
                        title="校验方式"
                        style="width: 320px"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.flowControl"
                        :rules="[0]"
                        title="流控"
                        style="width: 320px"
              />
            </div>
          </div>
        </div>

        <div v-if="ioPort">
          <div class="title">IO口信息-状态</div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.workIoCheck"
                        :rules="[0]"
                        title="IO口"
                        input-type="select"
                        style="width: 320px"
                        :options="ioList"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.workIoTrigger"
                        inputType="select"
                        :rules="[0]"
                        :options="triggerModeTypes"
                        style="width: 320px"
                        title="触发方式"
              ></yz-input>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.workIoTime"
                        :rules="[0]"
                        title="消抖延时(ms)"
                        style="width: 320px"
              />
            </div>
          </div>
          <div class="title">IO口信息-计数</div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.partCountIoCheck"
                        :rules="[0]"
                        title="IO口"
                        input-type="select"
                        style="width: 320px"
                        :options="ioList"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.partCountIoTrigger"
                        inputType="select"
                        :rules="[0]"
                        :options="triggerModeTypes"
                        style="width: 320px"
                        title="触发方式"
              ></yz-input>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.partCountIoTime"
                        :rules="[0]"
                        title="消抖延时(ms)"
                        style="width: 320px"
              />
            </div>
          </div>
          <div class="title">IO口信息-报警</div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.alarmIoCheck"
                        :rules="[0]"
                        title="IO口"
                        input-type="select"
                        style="width: 320px"
                        :options="ioList"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.alarmIoTrigger"
                        inputType="select"
                        :rules="[0]"
                        :options="triggerModeTypes"
                        style="width: 320px"
                        title="触发方式"
              ></yz-input>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.alarmIoTime"
                        :rules="[0]"
                        title="消抖延时(ms)"
                        style="width: 320px"
              />
            </div>
          </div>
        </div>

        <div v-if="moreKey.length > 0">
          <div class="title">驱动配置</div>

          <div class="row" v-for="(row, index) in moreKey" :key="index">
            <div class="col" v-for="(item, colIndex) in row" :key="colIndex">
              <yz-input v-model="form[item.key]"
                        :title="item.key"
                        :ellipsis="true"
                        style="width: 320px"
              />
            </div>
          </div>

        </div>

        <div>
          <div class="title">采集配置</div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.collectCycle"
                        :rules="[0]"
                        style="width: 320px"
                        :is-disable="isPrePlc"
                        :hint-rule="form.collectCycle ? [val => (val && /^\d+$/g.test(val)) || '只能输入数字'] : [() => true]"
                        title="采集周期(ms)"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.collectInterval"
                        :rules="[0]"
                        style="width: 320px"
                        :is-disable="isPrePlc"
                        :hint-rule="form.collectInterval ? [val => (val && /^\d+$/g.test(val)) || '只能输入数字'] : [() => true]"
                        title="采集间隔(ms)"
              />
            </div>
          </div>
        </div>

        <div v-if="isCnc">
          <div class="title">文件传输配置</div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.fileIp"
                        style="width: 320px"
                        :hint-rule="[
                            val => val ? /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val) || '请输入合法ip地址' : ()=> true]"
                        title="传输地址"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.filePort"
                        style="width: 320px"
                        :hint-rule="[
                            val => val ? /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(val) || '请输入合法端口' : () => true]"
                        title="传输端口"
              />
            </div>
          </div>

          <div class="row">
            <div class="col">
              <yz-input v-model="form.fileProtocol"
                        style="width: 320px"
                        title="传输协议"
                        input-type="select"
                        :options="dncProtocolTypes"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.fileUsername"
                        style="width: 320px"
                        title="用户名"
              />
            </div>
          </div>

          <div class="row">
            <div class="col">
              <yz-input v-model="form.filePassword"
                        style="width: 320px"
                        title="密码"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.fileDev"
                        style="width: 320px"
                        title="传输根目录"
              />
            </div>
          </div>

          <div class="title">在线加工配置
            <span>
              <q-icon name="iconfont icontubiao-72" class="text-grey" style="margin-left: 5px;margin-top: -3px;font-size: 14px" />
              <q-tooltip max-width="500px">
                使用此功能时,盒子作为ftp服务器,端口是21
              </q-tooltip>
            </span>
          </div>
          <div class="row">
            <div class="col">
              <yz-input v-model="form.dncPort"
                        style="width: 320px"
                        title="采集端口"
                        :is-disable="true"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.dncProtocol"
                        style="width: 320px"
                        title="传输协议"
                        input-type="select"
                        :options="dncProtocolTypes"
                        :is-disable="true"
              />
            </div>
          </div>

          <div class="row">
            <div class="col">
              <yz-input v-model="form.dncUsername"
                        style="width: 320px"
                        title="用户名"
              />
            </div>
            <div class="col">
              <yz-input v-model="form.dncPassword"
                        style="width: 320px"
                        title="密码"
              />
            </div>
          </div>
        </div>
      </div>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
        <q-btn unelevated :label="(isCompete || isCnc) ? '完成': '下一步'" color="primary" type="submit" :loading="submitting"/>
<!--        <span v-if="!isCompete" style="color: #999999;cursor: pointer" class="margin-l-20" @click="skipBind">跳过</span>-->
      </div>
    </q-form>
  </basic-dialog>
</template>
<script>
import _ from 'lodash'
import { collectTypeList, dncProtocolTypes, serialPortList, triggerModeTypes, ioList } from '../gateway-dialog/constant'
import { driverSubDevConf } from '../../../../../boot/miot/plc-list'

export default {
  name: 'sub-device-dialog',
  props: {
    isCompete: {
      type: Boolean,
      default: false
    },
    driverParams: {
      type: Object,
      default: () => {}
    },
    driverConfigData: {
      type: Object,
      default: () => {}
    },
    controllerType: {
      type: String,
      default: ''
    },
    currentDriverInfo: {
      type: Object,
      default: () => {}
    },
    isPreVersion: {
      type: Boolean,
      default: false
    },
    updateVersion: {
      type: [String, Number],
      default: '2'
    }
  },
  data () {
    return {
      show: false,
      sub: false,
      ioList: ioList,
      submitting: false,
      driverInfo: {},
      dncProtocolTypes: dncProtocolTypes,
      triggerModeTypes: triggerModeTypes,
      serialPortList: serialPortList,
      form: {
        type: '1',
        dncPort: '21',
        dncProtocol: '1',
        dncUsername: '',
        dncPassword: '',
        collectCycle: '2000',
        collectInterval: '2000',
        collectIp: '',
        collectPort: '',
        fileIp: '',
        filePort: null,
        fileDev: '',
        fileProtocol: '',
        fileUsername: '',
        filePassword: '',
        serialPort: null,
        baudRate: '',
        dataBit: '',
        stopBit: '',
        parity: '',
        flowControl: '',
        workIoCheck: '',
        workIoTrigger: '',
        workIoTime: '',
        partCountIoCheck: '',
        partCountIoTrigger: '',
        partCountIoTime: '',
        alarmIoCheck: '',
        alarmIoTrigger: '',
        alarmIoTime: ''
      }
    }
  },
  created () {
    this.initCycle()
  },
  computed: {
    netPort () {
      return this.form.type === '1' || this.isPrePlc
    },
    seriesPort () {
      return this.form.type === '2'
    },
    ioPort () {
      return this.form.type === '3'
    },
    isCnc () {
      return this.controllerType === '0'
    },
    isPlc () {
      return this.controllerType === '1'
    },
    isEnergy () {
      return this.controllerType === '2'
    },
    moreKey () {
      if (this.driverInfo && this.driverInfo.moreKey?.length > 0) {
        return _.chunk(this.driverInfo.moreKey, 2)
      }
      return []
    },
    collectTypeListData () {
      // 如果是上个版本。不允许选io采集
      if (this.isPreVersion) {
        return collectTypeList.filter(item => item.value !== '3')
      }
      return collectTypeList
    },
    isPrePlc () {
      return this.isPreVersion && this.isPlc
    }
  },
  methods: {
    initCycle () {
      // cnc: 默认2000ms, plc默认5000ms, 能耗默认60000ms
      if (this.controllerType === '0') {
        this.form.collectCycle = 2000
        this.form.collectInterval = 2000
      } else if (this.controllerType === '1') {
        this.form.collectCycle = 5000
        this.form.collectInterval = 5000
      } else if (this.controllerType === '2') {
        this.form.collectCycle = 60000
        this.form.collectInterval = 60000
      }
    },
    showDialog (driverInfo) {
      this.driverInfo = driverInfo
      Object.assign(this.form, this.$options.data.call(this).form)
      this.show = true
      if (driverInfo && driverInfo.moreKey?.length > 0) {
        driverInfo.moreKey.forEach(item => {
          this.$set(this.form, item.key, item.value)
        })
      }
      Object.assign(this.form, driverInfo)
      this.form.type = driverInfo.collectType ? driverInfo.collectType + '' : '1'
      this.form.dncPort = '21'
      this.form.dncProtocol = '1'
      if (!this.isCompete) {
        this.initCycle()
      }
    },
    hideDialog () {
      this.show = false
      this.$emit('hideDialog')
    },
    // 保存数据
    async submitData () {
      const moreKey = []
      if (this.moreKey.length > 0) {
        this.driverInfo.moreKey.forEach(item => {
          moreKey.push({
            key: item.key,
            value: this.form[item.key]
          })
        })
      }
      const params = {
        gatewayId: this.driverParams.gatewayId,
        productId: this.driverParams.productId,
        edgeDriverId: this.driverConfigData.edgeDriverId,
        subDeviceId: this.driverConfigData.subDeviceId,
        boxNum: this.driverParams.boxNum,
        ucloudBoxNum: this.driverParams.ucloudBoxNum,
        collectPort: this.netPort ? this.form.collectPort : '',
        collectIp: this.netPort ? this.form.collectIp : '',
        filePort: this.form.filePort,
        fileIp: this.form.fileIp,
        fileUsername: this.form.fileUsername,
        filePassword: this.form.filePassword,
        serialPort: this.seriesPort ? this.form.serialPort : '',
        baudRate: this.seriesPort ? this.form.baudRate : '',
        dataBit: this.seriesPort ? this.form.dataBit : '',
        stopBit: this.seriesPort ? this.form.stopBit : '',
        parity: this.seriesPort ? this.form.parity : '',
        flowControl: this.seriesPort ? this.form.flowControl : '',
        collectCycle: this.form.collectCycle,
        collectInterval: this.form.collectInterval,
        fileProtocol: this.form.fileProtocol,
        fileDev: this.form.fileDev,
        dncPort: this.form.dncPort,
        dncUsername: this.form.dncUsername,
        dncPassword: this.form.dncPassword,
        dncProtocol: this.form.dncProtocol,
        workIoCheck: this.form.workIoCheck,
        workIoTrigger: this.form.workIoTrigger,
        workIoTime: this.form.workIoTime,
        partCountIoCheck: this.form.partCountIoCheck,
        partCountIoTrigger: this.form.partCountIoTrigger,
        partCountIoTime: this.form.partCountIoTime,
        alarmIoCheck: this.form.alarmIoCheck,
        alarmIoTrigger: this.form.alarmIoTrigger,
        alarmIoTime: this.form.alarmIoTime,
        moreKey: moreKey,
        collectType: this.form.type,
        updateVersion: this.updateVersion
      }
      if (this.isPreVersion) {
        params.gateWayType = this.controllerType
        params.subDeviceId = this.driverParams.subDeviceId
      }
      this.submitting = true
      driverSubDevConf(params).then(res => {
        this.$emit('successSubmit')
      }).finally(() => {
        this.submitting = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">
/deep/.label-width{
  width: 120px;
}
.title {
  line-height: 1;
  font-weight: 500;
  font-size: 16px;
  color: $primary;
  margin-bottom: 20px;
}
.content-wrapper {
  height: 515px;
  overflow-y: auto;
  padding: 20px;
}

.detail-container{
  font-size: 14px;
  line-height: 1;
  padding-bottom: 14px;
}

.desc{
  font-size: 12px;
  line-height: 1;
  color: #666666;
  font-weight: normal;
}
</style>
